<template lang="html">
  <div class="">
    <div class="box" ref="box">exam</div>
    <div class="box" ref="box1">box1</div>
  </div>
</template>

<script>
import {getCount} from '@/assets/script/exam/index'
export default {
  methods: {
    init () {
      console.log(this)
      // 回调函数
      this.$refs.box.addEventListener('click', function (e) {
        console.log(this, e)
      })
      // 箭头函数
      this.$refs.box1.addEventListener('click', (e) => {
        console.log(this, e)
      })
    },
    // 创建对象
    createObj () {
      // 1、字面量
      var o1 = {name: "o1"}
      var o2 = new Object({name: "o2"})
      console.log(o1, o2)

      // 2、构造函数
      var M = function (name) {
        this.name = name
      }
      var o3 = new M("o3")
      console.log(o3)

      // 3、Object.create
      var p = {name: "p"}
      var o4 = Object.create(p)
      console.log(o4)

      // 4、class类
      class Point {
        constructor (props) {
          this.raduis = props.raduis
        }
        getArea () {
          return this.raduis * 2 * Math.PI
        }
      }

      class PointChild extends Point {
        constructor (props, name) {
          super(props)
          this.name = name
        }
      }

      var o5 = new Point ({raduis: 5})
      // console.log(o5.getArea())
      console.log(o5)

      var o6 = new PointChild({raduis: 33}, 2)
      console.log(o6)
    },
    extendsFn () {
      // 1、借用构造函数
      function Parent1 () {
        this.name = "parent1"
      }
      function Child1 () {
        Parent1.call(this)
        this.type = "child1"
      }

      let parent1 = new Parent1()
      let child1 = new Child1()
      console.log(parent1, child1)

      // 2、借用原型链实现继承
      // 缺点：原型对象的属性是共享的
      function Parent2 () {
        this.name = "parent2"
        this.play = [1, 2, 3]
      }

      function Child2 () {
        this.type = "child2"
      }
      Child2.prototype = new Parent2()

      let parent2 = new Parent2()
      let child2 = new Child2()
      console.log(parent2, child2)
      console.log(child2.hasOwnProperty("name")) // false, hasOwnProperty 不会往原型链上找属性

      for (var i in child2) {
        console.log(i) // 可以遍历出 name
      }

      // 3、组合式继承
      function Parent3 () {
        this.name = "parent3"
        this.play = [1, 2, 3]
      }

      function Child3 () {
        Parent3.call(this)
        this.type = "child3"
      }

      Child3.prototype = Object.create(Parent3.prototype)
      Child3.prototype.constructor = Child3

      let parent3 = new Parent3()
      let child3 = new Child3()
      console.log(parent3, child3)
    },
    defineFn () {
      let person = {
        name: 'defore',
        _age: 12
      }
      // 初始化 defineProperty value 和 get() set() 不能同时定义
      Object.defineProperty(person, "age", {
        // value: 24,
        enumerable: true,
        // writable: true,
        configurable: true,
        set: function (age) {
          console.log(age)
          this._age = age
        },
        get() {
          // console.log("GET")
          return this.value
        },
        // set(age) {
        //   console.log(age)
        // }
      })

      /*
      console.log(person)
      for (let i in person) {
        console.log(i)
      }
      console.log(person.hasOwnProperty("age"))
      */
      person.age = 25
      console.log(person)
    },

  },
  created () {
    console.log(getCount())
  },
  mounted () {
    // this.init()
    // this.createObj()
    // this.extendsFn()
    this.defineFn()
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/default.scss";

.box {
  width: 3rem;
  margin: 3rem auto;
  color: $default;
  font-size: .32rem;
  padding: .3rem;
  background-color: $yellow;
  border: .2rem solid $red;
  outline: .2rem solid $black;
}
</style>
